<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Sprite 应用</title>
        <style>
            *{margin:0;padding:0;}
            nav{
                width:150px;
                background:#F5F5F5;
                border:1px solid #A9A9A9;
                margin:20px;
            }
            ul{
                list-style:none;
            }
            li{
                border-bottom:1px solid #C0C0C0;
            }
            li:last-child{
                border-bottom:none;
            }
            a{
                display:block;
                height:35px;
                line-height:35px;
                font-size:14px;
                font-weight:400;
                color:black;
                text-decoration:none;
            }
            a:hover{
                color:red;
                background:#DCDCDC;
            }
            li i{
                float:left;
                width:24px;
                height:24px;
                margin:5px 10px 0 20px;
                background:url("x.png");
            }
            .icon-1 i{background-position:0 0;}
            .icon-2 i{background-position:0 -24px;}
            .icon-3 i{background-position:0 -48px;}
            .icon-4 i{background-position:0 -72px;}
            .icon-5 i{background-position:0 -96px;}
            .icon-6 i{background-position:0 -120px;}
            .icon-7 i{background-position:-24px 0;}
            .icon-8 i{background-position:-24px -24px;}
            .icon-9 i{background-position:-24px -48px;}
            .icon-10 i{background-position:-24px -72px;}
            .icon-11 i{background-position:-24px -96px;}
            .icon-12 i{background-position:-24px -120px;}
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li class="icon-1">
                    <i></i>
                    <h3><a href="#">家用电器</a></h3>
                </li>
                <li class="icon-2">
                    <i></i>
                    <h3><a href="#">手机数码</a></h3>
                </li>
                <li class="icon-3">
                    <i></i>
                    <h3><a href="#">电脑办公</a></h3>
                </li>
                <li class="icon-4">
                    <i></i>
                    <h3><a href="#">潮流服饰</a></h3>
                </li>
                <li class="icon-5">
                    <i></i>
                    <h3><a href="#">母婴玩具</a></h3>
                </li>
                <li class="icon-6">
                    <i></i>
                    <h3><a href="#">护肤彩妆</a></h3>
                </li>
                <li class="icon-7">
                    <i></i>
                    <h3><a href="#">鞋包皮具</a></h3>
                </li>
                <li class="icon-8">
                    <i></i>
                    <h3><a href="#">运动户外</a></h3>
                </li>
                <li class="icon-9">
                    <i></i>
                    <h3><a href="#">汽车用品</a></h3>
                </li>
                <li class="icon-10">
                    <i></i>
                    <h3><a href="#">美食旅游</a></h3>
                </li>
                <li class="icon-11">
                    <i></i>
                    <h3><a href="#">图书音响</a></h3>
                </li>
                <li class="icon-12">
                    <i></i>
                    <h3><a href="#">金融理财</a></h3>
                </li>
            </ul>
        </nav>
    </body>
</html>